從第 4 篇文章開始，到第 28 篇，陸續寫了許多功能，也是時候將成果給部署到網路上了。其實部署應該是要在第 5 篇就要寫了，這樣才能持續發布，但礙於鐵人賽時每天寫文章（尤其是一天要寫四篇）總得酌量自己當天能寫的份量，所以最後只好將部署放到這時候了。或許之後再做總集篇時，可以再做調整吧！
本篇會說明如何使用 GitHub Pages，將基於 Nuxt Content 的 Digital Garden 部署到網路上。
在開始前有些前置作業需要進行，分別是：
這邊會需要準備一個 domain，關於這部分已經有許多文章在描述了，本篇就先不詳述。
可以先到偏好的網域提供商購買網址，再透過偏好的 DNS 服務商設定網址，並將 Record 透過 CNAME 綁定到 <github-username.github.io。
比如說筆者是透過 Gandi 購買 fntsr.tw 網域，並透過 CloudFlare 將 iron23 綁定到 fntrlike.github.io。
由於前面〈將文章與網站的版本控制分離〉將內文與網站程式碼分離了，所以會有兩個 Git Repository，所以要先到 GitHub 建立兩個 Repository 並推送到專案上。這裡分別命名為：
上傳後，要到 Repository B 去啟用 GitHub Pages。
接著填寫 Custom domain 的欄位，把上面設定好的網域填寫進去。接著會需要一段時間進行驗證，驗證成功就會顯示綠色的勾勾與訊息。
如果有遇到任何問題，可以參見 Configuring a custom domain for your GitHub Pages site - GitHub Docs。
接著就要來編寫 GitHub Action 的設定檔，首先建立 @/.github/workflows/pages.yml，檔案名稱不影響執行，但因為接下來寫的是部署到 GitHub Page，所以暫名為 page.yml。
接下來的檔案結構整體大致如下，為了方便解說，會逐著拆分解釋。
name: Deploy Nuxt site to Pages
on:
...
permissions:
...
concurrency:
...
jobs:
build:
...
deploy-to-github-pages:
...
clean-up:
...
下面這段是定義了 workflow 的名稱，他會顯示在 GitHub Actions 的左側邊欄的部分，作為一個篩選器，讓同一個 workflow 的執行結果放在一起。
name: Deploy Nuxt site to Pages
on 語法決定了這個 workflow 的觸發條件，下列程式碼則限定本 workflow 在 main branch 有推送事件時，會觸發執行。其他事件可以參照 Workflow syntax: on 與 Events that trigger workflows。
on:
push:
branches: ["main"]
permission 則限定了這個 workflow 所擁有的權限
content 為 repository 的權限，這邊是唯讀pages 為 GitHub Pages 部署空間的權限，這邊是可以寫入。permissions:
contents: read
pages: write
id-token: write
接下來聊聊 build job 的部分，主要的 steps 有：
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 20
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
run_install: false
- name: Get pnpm store directory
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Get blog posts
uses: actions/checkout@v4
with:
repository: ${{ vars.CONTENT_REPO }}
ref: main
path: ./_write
- name: Static HTML export with Nuxt
run: pnpm run generate
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
name: deployment
path: ./dist
最後聊聊 Deploy 的部分，這邊 step 只有一個。needs 是指這個 job 相依於哪一個 job，要等相依的 job 完成才會執行本 job。environment 則可以協助我們在 GitHub Action 直接顯示我們的連結，可參見下圖。
在 steps 的部分，使用的是 GitHub 的 actions/deploy-pages@v2，他能協助我們不用設定就部署到 GitHub Pages。並透過 with 指定我們要使用哪個 artifact 去作為網站資料。
jobs:
build:
# .....
deploy-to-github-pages:
runs-on: ubuntu-latest
needs: build
environment:
name: github-pages
url: ${{ steps.github-deployment.outputs.page_url }}
steps:
- id: github-deployment
name: Deploy to GitHub Pages
uses: actions/deploy-pages@v2
with:
artifact_name: deployment
部署完，點擊連結就可以到我們的 Digital Garden 啦！
iThome鐵人賽
看影片追技術